<template>
  <div class="dialog">
    <!-- 这里的内容写死,就不灵活了,所以用一个占位符来占位 -->
    <!-- 父组件在使用子组件的时候,给子组件传递结构,传递 -->
    <!-- 这个占位符就是插槽 -->
    <slot name="title"></slot>
    <hr />
    <!-- 第一个插槽,用于接受标题 -->
    <slot name="content" uname="zs" age="18"></slot>
    <hr />
    <!-- 第二个插槽,用于接受对话框的内容 -->
    <!-- 有名字的插槽叫做具名插槽 -->
    <slot></slot>
    <!-- 第三个插槽,用于接受按钮 (没有指定name的插槽,默认插槽,它的name="default"-->
  </div>
</template>

<script>
export default {};
</script>

<style>
.dialog {
  border: 1px solid black;
  border-radius: 5px;
  width: 400px;
}
</style>